<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>


</head>
<style>
    .component-fade-enter-active,
    .component-fade-leave-active {
        transition: opacity .3s ease;
    }
    
    .component-fade-enter,
    .component-fade-leave-to
    /* .component-fade-leave-active for below version 2.1.8 */
    
    {
        opacity: 0;
    }
</style>

<body>

    <div id="transition-components-demo">
        <transition name="component-fade" mode="out-in">
            <component v-bind:is="view"></component>
        </transition>
    </div>
</body>
<script>
    new Vue({
        el: '#transition-components-demo',
        data: {
            view: 'v-a'
        },
        components: {
            'v-a': {
                template: '<div>Component A</div>'
            },
            'v-b': {
                template: '<div>Component B</div>'
            }
        }
    })
</script>

</html>